<script setup></script>

<template>
  <div>
    <h1>个人信息</h1>
    <div>姓名：{{ name }}</div>
    <div>年龄：{{ age }}</div>
    <div>性别(vue2)：{{ gender }}</div>
    <button @click="sayHello">说话</button>
    <button @click="sayWelcome">说话(vue2)</button>
  </div>
</template>

<script>
// import { h } from "vue";
export default {
  name: "App",

  data() {
    return {
      gender: "男",
    };
  },

  methods: {
    sayWelcome() {
      alert(`欢迎${this.gender}宾一位`);
    },
  },

  setup() {
    // 数据
    let name = "张三";
    let age = 18;

    // 方法
    function sayHello() {
      alert(`姓名：${name}, 年龄：${age}`);
    }

    return {
      name,
      age,
      sayHello,
    };

    // 返回一个渲染函数
    // return () => {
    //   return h("h1", "yesen");
    // };
  },
};
</script>

<style scoped></style>
